<template lang="html">
  <div>123</div>
</template>

<script>
export default {


  methods: {
    init() {
      let obj1 = {
        name: 'tom',
        getName: function() {
          return this.name
        }
      };

      let obj2 = {
        name: 'defore'
      };

      console.log(obj1.getName());
      console.log(obj1.getName.apply(obj2));
    },
    // apply 与 call 区别
    init2() {
      function showArgs(a, b, c) {
        console.log(a, b, c);
      }
      showArgs.apply(this, [5, 6, 7]);
      showArgs.call(this, 1, 2, 3);
      showArgs.bind(this)(4, 5, 7); // bind不是马上执行
      showArgs.bind(this, 1, 2, 3)(); // bind的参数形式类似apply
    },
    // 用apply调用基础类型方法
    init3() {
      // 数组追加
      let arr1 = [1, {
        name: 'defore'
      }, 'anb'];
      let arr2 = ['test', 112, 1024];
      Array.prototype.push.apply(arr1, arr2);
      console.log(arr1, arr2);

      // 数组中最大值和最小值
      let arr = [5, 24, 3, 55, 199, 444];
      let max = Math.max.apply(Math, arr);
      let min = Math.min.call(Math, arr[0], arr[1], arr[2], arr[3], arr[4], arr[5]);
      console.log(max, min);
    },
    isArray(obj) {
      return Object.prototype.toString.apply(obj) === '[object Array]';
    },
    log() {
      console.log.apply(console, arguments);
    },
    init4() {
      let arr = [1, 2];
      let obj = 123;
      this.log(this.isArray(arr));
      this.log(this.isArray(obj));
      this.log(1, 2, 4);
    },
    timeout() {
      for (var i = 0; i < 5; i++) {
        setTimeout(function() {
          console.log(new Date(), i); // 1s后全部输出5 ,循环过程中都是立即执行的
        }, 1000);
      }
      console.log(new Date(), i); // 先输出5
      // 结果 5,5,5,5,5,5
    },
    timeout2() {
      for (var i = 0; i < 5; i++) {
        (function(j) {
          setTimeout(function() {
            console.log(new Date(), j);
          }, 1000);
        })(i);
      }
      console.log(new Date(), i); //先输出5
      // 结果 5,0,1,2,3,4,
    },
    timeout3() {
      var output = function(i) {
        setTimeout(function() {
          console.log(new Date, i);
        }, 1000);
      };
      for (var i = 0; i < 5; i++) {
        output(i); // 这里传过去的 i 值被复制了
      }
      // 结果：0,1,2,3,4
    },
    timeout4() {
      for (let i = 0; i < 5; i++) {
        setTimeout(function() {
          console.log(new Date(), i);
        }, 1000);
      }
      // 结果：0,1,2,3,4
    },
    // es6
    timeout5() {
      const tasks = []; // 这里存放异步操作的 Promise
      const output = (i) => new Promise((resolve) => {
        setTimeout(() => {
          console.log(new Date, i);
          resolve();
        }, 1000 * i);
      });

      // 生成全部的异步操作
      for (var i = 0; i < 5; i++) {
        tasks.push(output(i));
      }

      // 异步操作完成之后，输出最后的 i
      Promise.all(tasks).then(() => {
        setTimeout(() => {
          console.log(new Date, i);
        }, 1000);
      });

      // 0, 1, 2, 3, 4, 5
    },
    // es7
    timeout6() {
      const sleep = (timeountMS) => new Promise((resolve) => {
        setTimeout(resolve, timeountMS);
      });

      (async() => { // 声明即执行的 async 函数表达式
        for (var i = 0; i < 5; i++) {
          await sleep(1000);
          console.log(new Date, i);
        }

        await sleep(1000);
        console.log(new Date, i);
      })();
    }
  },
  created() {
    // this.init2()
    // this.init4();
    this.timeout6();
  }
}
</script>

<style lang="scss">
</style>
